<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>车辆详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

		<link rel="stylesheet" type="text/css" href="../js/layer/mobile/need/layer.css">
		<link rel="stylesheet" type="text/css" href="../js/swiper/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="../css/index.css">
		<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
		<script type="text/javascript" src="../js/filter.js"></script>
		<script type="text/javascript" src="../js/config.js"></script>
		<script type="text/javascript" src="../js/index.js"></script>
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
		<script type="text/javascript" src="../js/layer/mobile/layer.js"></script>
		<style>
			.car-finance-service {position: relative;}
			.car-finance-service aside{ position: absolute; right: 0; bottom: 0;}
			.car-finance-service aside:after{content: ""; display: block; clear: both;}
			.car-finance-service aside span{ clear: both; margin-top: 5px; display: block; float: right; padding:1px 8px; border-radius:3px ; color: #fff; background: #F0A39D; font-size: 12px;}
		</style>
	</head>

	<body style="padding-bottom: 54px;">
		<div class="swiper-container">
			<div class="swiper-wrapper" id="swiperTop"></div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
		</div>
		<div class="swiper-container-zoom">
			<div class="swiper-wrapper" id="swiperZoom">

			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
		</div>
		<div id="shopHome" v-if="res.carTitle">
			<div class="car-info-header">
				<div class="car-basic-info">
					<div class="tc-car-title">{{res.carTitle}}</div>
					<div class="car-price-info">
						<div class="tc-price" v-if="res.carRetailPrice && res.carRetailPrice > 0"><label v-if="res.carFixedPriceState == 1">一口价</label>￥<b>{{res.carRetailPrice}}</b>万<span v-if="res.carTaxPrice">新车含税价：<s>{{res.carTaxPrice}}万元</s></span>
						</div>
						<div class="tc-price" v-else="res.carRetailPrice && res.carRetailPrice > 0"><b>面议</b>
						</div>
					</div>
					<div class="tc-car-reserved" v-if="res.carOrderState == 1">
						<span>定</span> 该车已被预定
					</div>
					<div class="tc-loan" v-if="res.carMortgageState == 1">
						<img src="http://113.shop.anpxd.com/assets/common/loan-09a931ebf208ba8683623dd3b71688d87764852e9ddc2fc28cc5e05f4904a49c.png" alt="Loan"> 首付-万
					</div>
					<div class="tc-info"><span v-if="res.carLicenceState == 1">{{res.carLicenceDate | filterGetDate}}</span><span v-if="res.carLicenceState == 2">未上牌</span><span v-if="res.carLicenceState == 3">新车</span>｜{{res.carMileage || '-'}}万公里｜{{res.carSaleState | filterCarSaleState}}</div>
					<div class="tc-info">联系方式：
						<a :href="'tel:'+res.user.userMobile+''" style="color:#000;margin-right:10px;" class="ng-binding">{{res.user.userMobile}}</a>{{res.user.userName}}</div>
					<!-- <div class="tc-info">库龄：{{res.stockAgeRemark || "-/天"}}</div> -->
					<div class="car-finance-service">
						<aside>
							<span v-if="res.carFinanceService==1">金融服务</span>
							<span v-if="res.carExtendedWarranty==1" style="background: #ECBE60;">延保服务</span>
						</aside>
					</div>
				</div>
			</div>
			<!--       <div class="car-info-body white-background">
        <div class="tc-car-basic">
          <div class="weui-flex">
            <div class="weui-flex__item tc-cell">
              <div v-if="res.carMileage">{{res.carMileage}}万公里</div>
              <div v-else="res.carMileage">-</div>
              <div>行驶里程</div>
            </div>
            <div class="weui-flex__item tc-cell">
              <div>{{res.carAgeRemark}}</div>
              <div v-if="res.carLicenceState == 1">{{res.carLicenceDate | filterGetDate}}上牌</div><div v-if="res.carLicenceState == 2">未上牌</div><div v-if="res.carLicenceState == 3">新车</div>
              <div v-else="res.carLicenceDate">-</div>
            </div>
            <div class="weui-flex__item tc-cell">
              <div>{{res.carLocationCityName || '-'}}</div>
              <div>车牌所在地</div>
            </div>
          </div>
          <div class="weui-flex">
            <div class="weui-flex__item tc-cell">
              <div>{{res.model.modelEnviron || '-'}}</div>
              <div>排放标准</div>
            </div>
            <div class="weui-flex__item tc-cell">
              <div>{{res.carGearbox || '-'}}</div>
              <div>变速箱</div>
            </div>
            <div class="weui-flex__item tc-cell">
              <div>{{res.carDisplacement || '-'}}</div>
              <div>排量</div>
            </div>
          </div>
          <div class="weui-flex">
            <div class="weui-flex__item tc-cell">
              <div>{{res.model.modelEnviron || '-'}}</div>
              <div>排放标准</div>
            </div>
            <div class="weui-flex__item tc-cell">
              <div>{{res.carGearbox || '-'}}</div>
              <div>变速箱</div>
            </div>
            <div class="weui-flex__item tc-cell">
              <div>{{res.carDisplacement || '-'}}</div>
              <div>排量</div>
            </div>
          </div>
        </div>
      </div> -->
			<div style="padding:15px 0;" v-if="res.carRadarInfo">
				<div class="echarts">
					<div id="echartscarRadarList" style=" height: 240px"></div>
				</div>
			</div>
			<div class="tc-car-detail-part" style="margin-top:10px">
				<div class="title">标价</div>
				<div class="car-info-body white-background">
					<div class="tc-car-basic">
						<div class="weui-flex">
							<div class="weui-flex__item tc-cell">
								<div v-if="res.carRetailPrice && res.carRetailPrice >=0">{{res.carRetailPrice}}万</div>
								<div v-else="res.carRetailPrice && res.carRetailPrice >=0">面议</div>
								<div>零售价</div>
							</div>
							<div class="weui-flex__item tc-cell">
								<div>{{res.carTransferState | filterCarTransferState}}</div>
								<div>过户费</div>
							</div>
							<div class="weui-flex__item tc-cell">
								<div>{{res.carFinanceService | filterCarMortgageState}}</div>
								<div>金融服务</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="tc-car-detail-part">
				<div class="title">车辆信息</div>
				<div class="car-info-body white-background">
					<div class="tc-car-basic">
						<div class="weui-flex">
							<div class="weui-flex__item tc-cell">
								<div>{{res.carFacotryDate | filterGetDate}}</div>
								<div>出厂年月</div>
							</div>
							<div class="weui-flex__item tc-cell">
								<div>{{res.carOutColor || '-'}}</div>
								<div>外观颜色</div>
							</div>
							<div class="weui-flex__item tc-cell">
								<div>{{res.carInColor || '-'}}</div>
								<div>内饰颜色</div>
							</div>
						</div>
						<div class="weui-flex">
							<div class="weui-flex__item tc-cell">
								<div>{{res.carType.carTypeName || '-'}}</div>
								<div>车身类型</div>
							</div>
							<div class="weui-flex__item tc-cell">
								<div v-if="res.carDisplacement">{{res.carDisplacement + res.carInletModel}}</div>
								<div v-else="res.carDisplacement">-</div>
								<div>排量</div>
							</div>
							<div class="weui-flex__item tc-cell">
								<div>{{res.carGearbox || '-'}}</div>
								<div>变速箱</div>
							</div>
						</div>
						<div class="weui-flex">
							<div class="weui-flex__item tc-cell">
								<div>{{res.carFuel || '-'}}</div>
								<div>燃油类型</div>
							</div>
							<div class="weui-flex__item tc-cell">
								<div>{{res.carEnviron || '-'}}</div>
								<div>排放标准</div>
							</div>
							<div class="weui-flex__item tc-cell">
								<div>{{res.car4sUpkeepState | filterCar4sUpkeepState}}</div>
								<div>4S店定期保养</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="tc-car-detail-part">
				<div class="title">亮点配置</div>
				<div class="content">
					<div class="tc-label-container">
					</div>
				</div>
				<div class="nav-more">
					<a v-bind:href="'cars_config.html'+params">更多参数配置</a>
				</div>
			</div>

			<!--       <div class="tc-car-detail-part">
        <div class="title">本店相似车</div>
        <div class="similar-car-content clearfix">
          <div class="similar-car-item">
            <div class="similar-car-item-detail">
              <div class="similar-car-cover">
                <img src="http://env-pro.oss-cn-beijing.aliyuncs.com/images/03AADA6B-02A6-42C6-A2B0-816F73DA7E99.jpg?x-oss-process=image/resize,m_fill,w_550,h_412,limit_0" alt="Resize,m fill,w 550,h 412,limit 0">
              </div>
              <div class="similar-car-body">
                <div class="similar-car-title">
                  MINIMINI(进口) 2017款 MINI Countryman 1.5T AT 四驱 COOPER 
                </div>
                <div class="similar-car-info">
                  2017年09月/6.0万公里
                </div>
                <div class="similar-car-price">
                  26万
                </div>
              </div>
            </div>
          </div>
          <div class="similar-car-item">
            <div class="similar-car-item-detail">
              <div class="similar-car-cover">
                <img src="http://env-pro.oss-cn-beijing.aliyuncs.com/images/03AADA6B-02A6-42C6-A2B0-816F73DA7E99.jpg?x-oss-process=image/resize,m_fill,w_550,h_412,limit_0" alt="Resize,m fill,w 550,h 412,limit 0">
              </div>
              <div class="similar-car-body">
                <div class="similar-car-title">
                  MINIMINI(进口) 2017款 MINI Countryman 1.5T AT 四驱 COOPER 
                </div>
                <div class="similar-car-info">
                  2017年09月/6.0万公里
                </div>
                <div class="similar-car-price">
                  26万
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="nav-more">
          <a href="/cars/127/detail_config">本店更多相似(2辆)</a>
        </div>
      </div> -->

			<!--       <div class="tc-car-detail-part">
        <div class="title">平台相似车</div>
        <div class="similar-car-content clearfix">
          <div class="similar-car-item">
            <div class="similar-car-item-detail">
              <div class="similar-car-cover">
                <img src="http://env-pro.oss-cn-beijing.aliyuncs.com/images/03AADA6B-02A6-42C6-A2B0-816F73DA7E99.jpg?x-oss-process=image/resize,m_fill,w_550,h_412,limit_0" alt="Resize,m fill,w 550,h 412,limit 0">
              </div>
              <div class="similar-car-body">
                <div class="similar-car-title">
                  MINIMINI(进口) 2017款 MINI Countryman 1.5T AT 四驱 COOPER 
                </div>
                <div class="similar-car-info">
                  2017年09月/6.0万公里
                </div>
                <div class="similar-car-price">
                  26万
                </div>
              </div>
            </div>
          </div>
          <div class="similar-car-item">
            <div class="similar-car-item-detail">
              <div class="similar-car-cover">
                <img src="http://env-pro.oss-cn-beijing.aliyuncs.com/images/03AADA6B-02A6-42C6-A2B0-816F73DA7E99.jpg?x-oss-process=image/resize,m_fill,w_550,h_412,limit_0" alt="Resize,m fill,w 550,h 412,limit 0">
              </div>
              <div class="similar-car-body">
                <div class="similar-car-title">
                  MINIMINI(进口) 2017款 MINI Countryman 1.5T AT 四驱 COOPER 
                </div>
                <div class="similar-car-info">
                  2017年09月/6.0万公里
                </div>
                <div class="similar-car-price">
                  26万
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="nav-more">
          <a href="/cars/127/detail_config">源之宝二手车市场更多相似(2辆)</a>
        </div>
      </div> -->

			<div class="footer">
				<!-- <div class="collect">收藏</div> -->
				<a v-bind:href="'home.html' + params" class="back-home">首页</a>
				<div class="ask-low-price" v-if="customerShopId && customerShopId != 'false'" onclick="askLowerPrice()">询问底价</div>
				<a v-bind:href="'tel:'+res.user.userMobile" class="call-phone">电话联系</a>
			</div>
		</div>

	</body>
	<script type="text/javascript" src="../js/swiper/swiper.min.js"></script>
	<script type="text/javascript">
		document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px';

		function initSwiper() {
			var mySwiper = new Swiper('.swiper-container', {
				loop: true,
				pagination: {
					el: '.swiper-pagination',
					type: 'fraction',
				},
				autoplay: {
					delay: 3000,
				},
			})

			var zoomSwiper = new Swiper('.swiper-container-zoom', {
				loop: true,
				pagination: {
					el: '.swiper-pagination',
					type: 'fraction',
				},
				zoom: {
					toggle: false,
				}
			})
			$('.swiper-container img').click(function() {
				$('.swiper-container-zoom').css('visibility', 'inherit');
			});
			$('.swiper-container-zoom').click(function() {
				$('.swiper-container-zoom').css('visibility', 'hidden')
			});
		}

		var wxTitle = "启辕汽车";
		var wxDesc = "欢迎光临启辕汽车！";
		var wxImgUrl = "";
		var wxUrl = window.location.href;

		var shopHome = new Vue({
			el: '#shopHome',
			data: {
				res: {
		          user:{},
		          carRadarInfo:{}
		        },
				imgUrl: imgUrl,
				marketId: marketId,
				shopId: shopId,
				carId: carId,
				customerShopId: customerShopId,
				params: '?marketId=' + marketId + '&shopId=' + shopId + '&carId=' + carId + '&imgUrl=' + imgUrl + '&customerShopId=' + customerShopId,
			},
			methods: {        },
		});

		$.ajax({
			type: "get", //data 传送数据类型。post 传递
			dataType: 'json', // 返回数据的数据类型json
			url: defaultUrl + "/controller/getCarById", // yii 控制器/方法
			cache: false,
			data: {
				'carId': carId,'imageViewId':3
			}, //传送的数据     
			error: function() {
				alert("数据传输错误");
			},
			success: function(data) {
				console.log(data);
				if(data.code != 1) {
					return false
				}
				shopHome.res = data.result;
				echartInit()
				wxTitle = shopHome.res.brand.brandName + shopHome.res.series.seriesName;
				wxDesc = shopHome.res.carTitle
				var firstImgUrl = '';
				for(var i = 0; i < shopHome.res.carImages.length; i++) {
					var imgJson = shopHome.res.carImages[i]
					if(imgJson.imageKey == 'left_anterior') {
						firstImgUrl = imgJson.imageUrl;
						console.log(firstImgUrl)
					}
				}
				wxImgUrl = shopHome.imgUrl + firstImgUrl + '.r_40xh_40';
				callJS(os);

				marketId = data.result.shop.marketId;
				shopId = data.result.shop.shopId;
				shopHome.params = '?marketId=' + marketId + '&shopId=' + shopId + '&carId=' + carId + '&imgUrl=' + imgUrl + '&customerShopId=' + customerShopId
				var carImgList = data.result.carImages;
				console.log(carImgList);
				var imgTopHtml = '';
				var imgZoomHtml = '';
				if(carImgList.length == 0) {
					imgTopHtml += '<div class="swiper-slide"><img src="../images/default4x3.png"></div>';
					imgZoomHtml += '<div class="swiper-slide"><div class="swiper-zoom-container"><img src="../images/default.png"></div></div>';
				} else {
					for(var i = 0; i < carImgList.length; i++) {
						if (carImgList[i].imageKey != 'vin') {
							imgTopHtml += '<div class="swiper-slide"><img src="' + shopHome.imgUrl + carImgList[i].imageUrl + '.r_1200xh_900"></div>';
							// imgTopHtml += '<div class="swiper-slide" style="background-image:url('+ shopHome.imgUrl + carImgList[i].imageUrl +'.r_1200xh_900)"></div>';
							imgZoomHtml += '<div class="swiper-slide"><div class="swiper-zoom-container"><img src="' + shopHome.imgUrl + carImgList[i].imageUrl + '"></div></div>';
						}
						
					}
				}

				$('#swiperTop').html(imgTopHtml);
				$('#swiperZoom').html(imgZoomHtml);
				initSwiper();

				$.ajax({
					type: "get", //data 传送数据类型。post 传递
					dataType: 'json', // 返回数据的数据类型json
					url: defaultUrl + "/wx-web/controller/wx/getShareSign", // yii 控制器/方法
					cache: false,
					data: {
						'url': wxUrl,
						'marketId': marketId
					}, //传送的数据
					error: function() {
						alert("数据传输错误");
					},
					success: function(data) {
						console.log(data);
						if(data.code != 1) {
							return false
						}
						// wxUrl = window.location.origin+'/mshop/src/share.html?marektId='+marketId+'&id='+carId+'&shareType=1&appId='+data.result.appId+'&urlPath='+window.location.origin;
						wxUrl = window.location.origin + '/wx-web/controller/wx/toWxOpenOauth2?action=carDetail&state=' + carId + '&marketId=' + marketId + '&appId=' + data.result.appId;
						setWxConfig(data.result);

					}
				});
			}
		});

		function askLowerPrice() {
			layer.open({
				title: [
					'电话询价',
					'background-color:#ff6816; color:#fff;line-height:44px;height:44px;'
				],
				content: '手机号：<input type="tel" class="ask-mobile" id="askMobile" placeholder="请输入您手机号"/>',
				btn: ['确认', '取消'],
				yes: function(index) {
					var pass = $('#askMobile').val();
					if(!(/^[1][3,4,5,7,8][0-9]{9}$/.test(pass))) {
						alert('请填写正确格式的手机号！');
						$('#askMobile').focus();
						return false;
					}
					$.ajax({
						type: "get", //data 传送数据类型。post 传递
						dataType: 'json', // 返回数据的数据类型json
						url: defaultUrl + '/crm-web/controller/customer/insertWxInquiry',
						cache: false,
						data: {
							'customerMobile': pass,
							'carId': carId,
							'marketId': marketId,
							'shopId': shopId,
							'customerShopId': customerShopId,
							'seriesId': shopHome.res.seriesId,
							'brandId': shopHome.res.brandId,
							'brandName': shopHome.res.brand.brandName,
							'seriesName': shopHome.res.series.seriesName,
							'carTitle': shopHome.res.carTitle,
							'carImageUrl': shopHome.res.carImageUrl,
							'carRetailPrice': shopHome.res.carRetailPrice,

						}, //传送的数据
						error: function() {
							alert("数据传输错误");
						},
						success: function(data) {
							console.log(data);
							if(data.code != 1) {
								alert(data.msg);
								return false;
							}
							layer.open({
								content: '您的询价申请已提交<br>商户稍后将与您联系！',
								skin: 'msg',
								time: 3 //2秒后自动关闭
							});
						}
					});
				}
			});
		}
	</script>
	<script type="text/javascript">
		function echartInit() {
			var echartscarRadarListData = {
				legend: {
					bottom: 5,
					data: ['北京'],
					itemGap: 20,
					textStyle: {
						color: '#fff',
						fontSize: 14
					},
					selectedMode: 'single'
				},
				radar: {
					indicator: [{
							name: '排量(10)',
							max: 6
						},
						{
							name: '车龄(15)',
							max: 15
						},
						{
							name: '里程(20)',
							max: 20
						},
						{
							name: '价格(80)',
							max: 80
						},
						{
							name: '过户(10)',
							max: 10
						}
					],
					splitLine: {
						lineStyle: {
							color: ['rgba(255,104,22, 0.4)', 'rgba(255,104,22, 0.1)', ].reverse()
						}
					},

					splitNumber: 5,
					name: {
						textStyle: {
							color: '#F9713C'
						}
					},
					splitArea: {
						show: false
					},
					axisLine: {
						lineStyle: {
							color: 'rgba(255,104,22, 0.5)'
						}
					}
				},
				series: {
					name: '偏爱车辆价格',
					type: 'radar',
					data: [
						[]
					],
					itemStyle: {
						normal: {
							color: '#FF6816',

						}
					},
					areaStyle: {
						normal: {
							opacity: 0.1
						}
					}
				}
			}

			shopHome.$nextTick().then(() => {
				
				echartscarRadarListData.series.data[0][0] = parseFloat(shopHome.res.carRadarInfo.carDisplacement)>6?6:parseFloat(shopHome.res.carRadarInfo.carDisplacement)||0
				echartscarRadarListData.series.data[0][1] = 15-(shopHome.res.carRadarInfo.carAge>15?15:shopHome.res.carRadarInfo.carAge)||0
				echartscarRadarListData.series.data[0][2] = 20-(shopHome.res.carRadarInfo.carMileage>20?20:shopHome.res.carRadarInfo.carMileage)||0
				echartscarRadarListData.series.data[0][3] = shopHome.res.carRadarInfo.carRetailPrice>80?0:80-(parseFloat(shopHome.res.carRadarInfo.carRetailPrice)||0)
				echartscarRadarListData.series.data[0][4] = 10-(parseFloat(shopHome.res.carRadarInfo.carTransferNum)>10?10:parseFloat(shopHome.res.carRadarInfo.carTransferNum))||0
				
				
				echartscarRadarListData.radar.indicator[0].name = `排量(${shopHome.res.carDisplacement||'0'})`
				echartscarRadarListData.radar.indicator[1].name = `车龄(${shopHome.res.carRadarInfo.carAge||'0'}/年)`
				echartscarRadarListData.radar.indicator[2].name = `里程(${shopHome.res.carRadarInfo.carMileage||'0'}/万公里)`
				echartscarRadarListData.radar.indicator[3].name = `价格(${shopHome.res.carRadarInfo.carRetailPrice||'0'}/万)`
				echartscarRadarListData.radar.indicator[4].name = `过户(${parseFloat(shopHome.res.carRadarInfo.carTransferNum)||'0'}/次)`

				var echartsDome = echarts.init(document.getElementById('echartscarRadarList'))
				echartsDome.setOption(echartscarRadarListData)
			})

		}
	</script>

</html>